/**
 * Created by zsgjs on 2017/2/10.
 */

/*
 *  对话框组件（弹出）
 */
import React, { Component } from 'react';

import {
    StyleSheet,
    View,
    ScrollView,
    Dimensions,
    Animated,
    Text,
    Easing,
    TouchableOpacity
} from 'react-native';

var TimerMixin = require('react-timer-mixin');

import model from '../classes/Model';

const Dialog = React.createClass({

    mixins : [TimerMixin],

    getDefaultProps() {
        return {
            site: ''
        }
    },

    getInitialState() {
        return {
            scale: new Animated.Value(0),
            opacity: new Animated.Value(0),
            offsetx: new Animated.Value(0),
            hide: true,
        }
    },

    render(): ReactElement {
        if (this.state.hide) return (<View />);
        else {
            return (
                <View style={styles.container}>
                    <TouchableOpacity
                        onPress = {()=>this.animateStop()}
                        activeOpacity={1}
                    >
                        <Animated.View style={[styles.maskStyle, {opacity: this.state.opacity}]}>
                        </Animated.View>
                    </TouchableOpacity>

                    <Animated.View style={[styles.popover, {
                        transform: [                        // `transform`是一个有序数组（动画按顺序执行）
                            {scale: this.state.scale},  // 将`bounceValue`赋值给 `scale`
                        ]
                    }]}>
                        <Text style={{color:'red', fontSize: 15}}>地址：{this.props.site}
                            <Animated.View style={[{backgroundColor:'black', width: 15, height: 3}, {transform:[{
                                translateX: this.state.offsetx.interpolate({
                                    inputRange: [0, 1],
                                    outputRange: [0, 230]
                                }),
                             }]}]}>

                            </Animated.View>
                        </Text>
                    </Animated.View>
                </View>
            )
        }
    },

    animateStart() {
        this.setState({
            hide: false
        });

        Animated.parallel([

            Animated.timing(
                this.state.opacity,
                {
                    easing: Easing.linear,
                    duration: 200,
                    toValue: 0.7,
                }
            ),
            Animated.timing(
                this.state.scale,
                {
                    easing: Easing.linear,
                    duration: 200,
                    toValue: 1,
                }
            )

        ]).start(()=>this.postionMoveAnimate());
    },

    postionMoveAnimate() {
        Animated.timing(
            this.state.offsetx,
            {
                easing: Easing.linear,
                duration: 1000,
                toValue: 1,
            }
        ).start(
            ()=>{
                Animated.timing(
                    this.state.offsetx,
                    {
                        easing: Easing.linear,
                        duration: 1000,
                        toValue: 0.01,
                    }
                ).start()
            }
        )
    },

    animateStop(){
        Animated.parallel([

            Animated.timing(
                this.state.opacity,
                {
                    easing: Easing.linear,
                    duration: 200,
                    toValue: 0.01,
                }
            ),
            Animated.timing(
                this.state.scale,
                {
                    easing: Easing.cubic,
                    duration: 200,
                    toValue: 0.01,
                }
            )
        ]).start();

        // Animated.timing(
        //     this.state.offsetx,
        //     {
        //         easing: Easing.linear,
        //         duration: 1,
        //         toValue: 0,
        //     }
        // ).start()

        this.state.offsetx.setValue(0)

        setTimeout(
            () => this.setState({hide: true}),
            500
        );

        clearTimeout(TimerMixin)
    },
});

const styles = StyleSheet.create({
    container: {
        position:'absolute',
        width: model.screen_w,
        height: model.screen_h * 0.5,
        left: 0,
        top: 0
    },

    maskStyle: {
        position:'absolute',
        width: model.screen_w,
        height: model.screen_h * 0.5,
        left: 0,
        top: 0,
        opacity: 1,
        alignItems: "center",
        justifyContent:'center',
        backgroundColor:"white"
    },

    popover:{
        height: 100,
        width: 250,
        backgroundColor:'#ddd',
        left: (model.screen_w - 250) * 0.5,
        top: (model.screen_h * 0.5 - 100) * 0.5,
        justifyContent:'center',
        alignItems:'center',
        borderRadius: 10
    }
});

module.exports = Dialog;